<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="collapse">
        <el-menu :default-active="$route.path" router class="el-menu-vertical" text-color="#fff" active-text-color="rgb(64, 158, 255)" background-color="#393e42" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
          <el-sub-menu index="/">
            <template #title>
              <el-icon><SvgIcon name="home"></SvgIcon></el-icon>
              <span>首页</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="dashboard">
                <template #title>
                  <el-icon><SvgIcon name="dashboard"></SvgIcon></el-icon>
                  <span>仪表盘</span>
                </template>
              </el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

          <template v-for="menu in userInfoMenus.menus" :key="menu.parentMenus.name">
            <template v-if="menu.childMenus">
              <el-sub-menu :index="menu.parentMenus.name">
                <template #title>
                  <el-icon><SvgIcon :name="menu.parentMenus.icon"></SvgIcon></el-icon>
                  <span>{{ menu.parentMenus.title }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item v-for="childMenu in menu.childMenus" :index="childMenu.name" :key="childMenu.name">
                    <template #title>
                      <el-icon><SvgIcon :name="childMenu.icon"></SvgIcon></el-icon>
                      <span>{{ childMenu.title }}</span>
                    </template>
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </template>
            <template v-else>
              <el-sub-menu :index="menu.parentMenus.name">
                <template #title>
                  <el-icon><SvgIcon :name="menu.parentMenus.icon"></SvgIcon></el-icon>
                  <span>{{ menu.parentMenus.title }}</span>
                </template>
              </el-sub-menu>
            </template>
          </template>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          <el-row :gutter="20">
            <el-col :span="4">
              <div :title="isCollapse ? '点击展开' : '点击收起'" class="box_bgd" @click="isC">
                <!-- 点击展开收起导航和切换对应图标 -->
                <el-icon v-if="isCollapse"><Expand /></el-icon>
                <el-icon v-else><Fold /></el-icon>
              </div>
            </el-col>
            <el-col :offset="18" :span="2">
              <div class="box_bgd">
                <el-dropdown type="primary">
                  <el-avatar :src="userInfo.icon" />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="toHome">首页</el-dropdown-item>
                      <el-dropdown-item @click="logout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { reactive, ref, onBeforeMount } from 'vue'
import { ElMessage } from 'element-plus'
import _ from 'lodash'
import { Expand, Fold } from '@element-plus/icons-vue'
import SvgIcon from '@/components/SvgIcon.vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/useAuthStore'
import { getInfo, logout as logoutApi } from '@/plugins/login'

const isCollapse = ref(true)

const router = useRouter()

const useAuthStoreData = useAuthStore()

const userInfo = reactive({
  roles: ['TEST'],
  icon: 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/timg.jpg',
  menus: [
    {
      id: 1,
      parentId: 0,
      createTime: '2020-02-02T06:50:36.000+0000',
      title: '商品',
      level: 0,
      sort: 0,
      name: 'pms',
      icon: 'product',
      hidden: 0
    }
  ],
  username: 'admin'
})

const userInfoMenus = reactive({
  menus: []
})

//生命周期
onBeforeMount(() => {
  getUserInfo()
})

function getUserInfo() {
  getInfo().then(
    data => {
      if (data.code === 200) {
        userInfo.icon = data.data.icon
        userInfo.roles = data.data.roles
        userInfo.menus = data.data.menus
        userInfo.username = data.data.username
        getUserInfoMenus()
      } else {
        ElMessage({
          showClose: true,
          message: data.message,
          type: 'error'
        })
      }
    },
    error => {
      console.log('错误', error.message)
    }
  )
}

// 封装多级菜单
function getUserInfoMenus() {
  const meun = userInfo.menus
  if (meun != undefined && meun != null) {
    _.filter(meun, function (o) {
      return o.level === 0 && o.hidden === 0
    }).forEach(function (value) {
      if (value.hidden === 0) {
        let parentMenusValue = {
          parentMenus: {},
          childMenus: []
        }
        parentMenusValue.parentMenus = value
        userInfoMenus.menus.push(parentMenusValue)
      }
    })

    userInfoMenus.menus.forEach(function (value) {
      value.childMenus = _.filter(meun, function (o) {
        return o.parentId === value.parentMenus.id
      })
    })
  }
}

function isC() {
  isCollapse.value = !isCollapse.value
}

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

// 跳转首页
function toHome() {
  router.push('/')
}

// 跳转首页
function logout() {
  logoutApi().then(
    data => {
      if (data.code === 200) {
        let user = useAuthStoreData.getUser
        user.tokenHead = ''
        user.token = ''
        useAuthStoreData.setAuth(false)
        useAuthStoreData.setUser(user)
        localStorage.removeItem('tokenHead')
        localStorage.removeItem('token')
        ElMessage({
          showClose: true,
          message: '登出成功',
          type: 'success'
        })
        router.push('/admin/login')
      } else {
        ElMessage({
          showClose: true,
          message: data.message,
          type: 'error'
        })
      }
    },
    error => {
      console.log('错误', error.message)
    }
  )
}
</script>

<style>
.el-header {
  background: #b3c0d1;
  color: #333;
  padding: 0 !important;
}

.el-aside {
  background: #393e42;
  color: #333;
  height: 100rem;
}

.el-menu {
  border-right-width: 0;
}
.el-main {
  color: #333;
}

.box_bgd {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.box_bgd i {
  font-size: 20px;
}
.box_bgd:hover {
  background: rgb(203, 215, 230);
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}
</style>
